import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import Page1 from './lession1'
import Page2 from './lession2'
import Page3 from './lession3'
import Page4 from './lession4'
import Page5 from './lession5'
import Page6 from './lession6'
import Page7 from './lession7'
import Page8 from './lession8'
import Page9 from './lession9'

const menus = {
    lession1: Page1,
    lession2: Page2,
    lession3: Page3,
    lession4: Page4,
    lession5: Page5,
    lession6: Page6,
    lession7: Page7,
    lession8: Page8,
    lession9: Page9
}

const menuKeys = Object.keys(menus)

const styles = {
    root: {
        height: '100vh',
        display: 'flex'
    },
    list: {
        width: '20%'
    },
    view: {
        height: '100%',
        width: '80%',
        boxSizing: 'border-box',
        padding: '20px',
        borderWidth: '10px',
        borderStyle: 'outset'
    }
}

export default class App extends Component {

    state = { activeKey: 'lession1' }

    changeView = (key) => {
        this.setState({ activeKey: key })
    }

    renderView() {
        const { activeKey } = this.state
        const View = menus[activeKey]
        return <React.Fragment>
            <View />
            {View.tips}
            {
                View.official
                    ? <rlink>官方文档：<a href={View.official}>{View.official}</a></rlink>
                    : null
            }
        </React.Fragment>
    }

    render() {
        return (
            <div style={styles.root}>
                {/* 导航菜单 */}

                <ul style={styles.list}>
                    <h1>基础</h1>
                    {menuKeys.map((key) => <li key={key}>
                        <a href='javascript:void(0)' onClick={() => this.changeView(key)}>{key}</a>
                    </li>)}
                    <h1>进阶</h1>
                </ul>

                {/* view */}
                <div style={styles.view}>
                    {this.renderView()}
                </div>
            </div>
        )
    }
}

ReactDOM.render(<App />, document.getElementById('root'))